<template>
  <div id="app">
    <div class="forum-container">
      <div class="post-list">
        <div v-if="isLoading">Loading...</div>
        <div v-if="errorMessage">{{ errorMessage }}</div>
        <div class="post-card" v-for="post in posts" :key="post.id">
          <div class="post-cover">
            <img :src="post.coverImage" :alt="post.title">
          </div>
          <div class="post-content">
            <h3 class="post-title">{{ post.title }}</h3>
            <p class="post-excerpt">{{ post.excerpt }}</p>
            <div class="post-info">
              <span class="post-author">{{ post.author }}</span>
              <span class="post-date">{{ post.date }}</span>
              <span class="post-comments">{{ post.comments }} comments</span>
            </div>
            <button class="read-more-btn">Read More</button>
          </div>
        </div>
      </div>
      <div class="sidebar">
        <div class="sidebar-section">
          <h3 class="sidebar-title">Popular Posts</h3>
          <ul class="popular-posts">
            <li v-for="post in popularPosts" :key="post.id">
              <a href="#">{{ post.title }}</a>
            </li>
          </ul>
        </div>
        <div class="sidebar-section">
          <h3 class="sidebar-title">Categories</h3>
          <ul class="categories">
            <li v-for="category in categories" :key="category.id">
              <a href="#">{{ category.name }}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: 'App',
  data() {
    return {
      posts: [
        {
          // id: 1,
          // title: '如何高效种植水稻',
          // excerpt: '本文介绍了种植水稻的高效方法,包括选择优良品种、合理施肥、科学管理等。',
          // coverImage: 'https://via.placeholder.com/300x200',
          // author: 'John Doe',
          // date: '2023-04-15',
          // comments: 23
        },
      ],
      popularPosts: [
        // { id: 1, title: '有机农业的优势' }
      ],
      categories: [
        // { id: 1, name: '种植技术' }
      ],
      isLoading: true,
      errorMessage: ''
    }
  },
  created() {
    this.fetchPosts();
    this.fetchPopularPosts();
    this.fetchCategories();
  },
  methods:{
    async fetchPosts(){
      try {
        const response = await axios.post('http://localhost:8888/luntanInformation');    //API
        this.posts = response.data.data;
        console.log(response.data.data)
      }
      catch (error) {
        this.errorMessage = 'Failed to load posts.';
        console.error('Error', error);
      } finally {
        this.isLoading = false;
      }
    },
    async fetchPopularPosts(){
      try {
        const response = await axios.post('http://localhost:8888/luntanInformation');     //API
        this.popularPosts = response.data.popularPosts;
        console.log(response.data.popularPosts)
      } catch (error) {
        this.errorMessage = 'Failed to load posts.';
        console.error('Error', error);
      } finally {
        this.isLoading = false;
      }
      },
    async fetchCategories() {
      try {
        const response = await axios.post('http://localhost:8888/luntanInformation');    //API
        this.categories = response.data.categories;
        console.log(response.data.categories)
      } catch (error) {
        this.errorMessage = 'Failed to load posts.';
        console.error('Error', error);
      } finally {
        this.isLoading = false;
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.forum-container {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-gap: 30px;
  margin-top: 20px;
}

.post-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 30px;
}

.post-card {
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.post-cover img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.post-content {
  padding: 20px;
}

.post-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.post-excerpt {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.post-info {
  font-size: 12px;
  color: #999;
  margin-bottom: 20px;
}

.post-author,
.post-date,
.post-comments {
  margin-right: 10px;
}

.read-more-btn {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
}

.sidebar {
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.sidebar-section {
  margin-bottom: 30px;
}

.sidebar-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.popular-posts li,
.categories li {
  margin-bottom: 5px;
}

.popular-posts li a,
.categories li a {
  color: #2c3e50;
  text-decoration: none;
}

.popular-posts li a:hover,
.categories li a:hover {
  color: #007bff;
}
</style>